<template>
    <Modal
        v-model="modal"
        @on-ok="call"
        @on-cancel="cancel">
        {{title}}<Input v-model="phoneNumber"/>
        <Table v-if="transferType == 'agent' || transferType == 'ivr' || transferType == 'askAgent'|| transferType == 'queue'" :columns="agentColumns" :data="dataList" max-height="500" @on-row-click="rowClick"></Table>
    </Modal>
</template>
<script>
    export default {
          props: {
            showTransferPage:Boolean,
            transferType:String,
            dataList: Array,
          },
        data () {
            return {
                modal: false,
                phoneNumber:'',
                agentColumns:[],
                title:'员工工号'
            }
        },
        methods: {
            call () {
                this.$emit("closeTransferPage",this.transferType, this.phoneNumber);
            },
            cancel(){
                this.$emit("closeTransferPage", '', '');
            },
            rowClick(val,index){
                if(this.transferType == 'agent' || this.transferType == 'askAgent'){
                    this.phoneNumber = val.agentNumber;
                }else if(this.transferType == 'ivr'){
                    this.phoneNumber = val.id;
                }else if(this.transferType == 'queue'){
                    this.phoneNumber = val.queueNum;
                }
                
            }
        },
        watch:{
              showTransferPage:function () {
                  this.modal=this.showTransferPage;
                  this.phoneNumber = '';
                  switch(this.transferType){
                      case 'ivr':
                        this.agentColumns = [{title:'IVR名称',key:'ivrName'},{title:'id',key:'id'}];
                        this.title = 'IVR名称';
                        break;
                      case 'queue':
                        this.title = '技能组号码';
                        this.agentColumns = [{title:'技能组名称',key:'name'},{title:'技能组号码',key:'queueNum'}];
                        break;
                      case 'pstn':
                      case 'askPstn':
                        this.title = '外线号码';
                        break;
                      case 'agent':
                        this.title = "转接座席";
                        this.agentColumns = [{title:'员工姓名',key:'employeeName'},{title:'员工工号',key:'agentNumber'},{title:'员工状态',key:'employeeOnLineState'}]
                        break;
                      case 'askAgent':
                        this.title = "询问座席";
                        this.agentColumns = [{title:'员工姓名',key:'employeeName'},{title:'员工工号',key:'agentNumber'},{title:'员工状态',key:'employeeOnLineState'}]
                        break;
                      default:
                        this.agentColumns = [];
                        break;
                  }
              }
        }
    }
</script>